<template>
   <div>
      <div class="browsecount" v-if="BrowseType=='viewed'">
         总浏览量:{{PersonalData?.extra?.browsecount}}
      </div>
      <el-empty description="空数据" v-if="getState" class="state"></el-empty>
      <div v-else style="width:100%">
         <el-timeline >
            <el-timeline-item  v-for="data in getBrowseDataNow" :key="data.time" :timestamp="data.time" placement="top" >
              <button v-for="item  in  data[data.time]" :key="item.updateTime" class="BrowseOne flex" @click="toPersonal(item.uid)">
                    <img  :src="item.headphoto" class="headphoto">
                    <div class="flex" id="Detail">
                        <div class="overflow" id="name">{{item.username}}</div>
                        <div class="overflow flex" id="time" >
                             <div style="margin-right:5px"> {{item.updateTime.slice(11,19)}}</div>
                             <div v-if="item.browsetype==0" class="overflow" style="color:var(--GeneralBackColor-half)">访问主页失败</div>
                             <div  v-else-if="BrowseType=='view'" class="overflow">访问了他的主页</div>
                             <div  v-else-if="BrowseType=='viewed'" class="overflow">访问了我的的主页</div>
                             <div class="view" v-if="item.browseCount">
                                <i class="el-icon-view"></i>
                                {{item.browseCount}}
                             </div>
                       </div>
                    </div>

               </button>
            </el-timeline-item>
        </el-timeline>
      </div>
   </div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'

  export default 
  {
     name :'', 
     computed:{
        ...mapState('Personal',['BrowseData','PersonalData','BrowseType']),
        getBrowseDataNow(){
           return this.BrowseData[this.BrowseType]
        },
        getState(){
        
           let data = this.BrowseData[this.BrowseType]
           if(data == null || data==undefined ) return true
           if(data && data.length == 0 )return true
           return false
        }
     },
     methods:{
       ...mapActions('Personal',['getBrowseData']),
        toPersonal(uid){
            this.$public.ToPersonal(uid)
        },
     },
     mounted() {
        this.getBrowseData(this.PersonalData.uid)
     },
  }
</script>
<style scoped lang='less'>
   /* 隐藏滚动条 */
::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 10px; 
    height: auto;
}
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    background:var(--GeneralBackColor);
    border-radius: 15px;
}
  
::-webkit-scrollbar-track {
    background:var(--GeneralBackColor-half);
}
::v-deep  div.el-timeline-item__timestamp.is-top{
    color: white !important;
    font-weight: 600;
    font-size: 20px;
}
::v-deep .el-timeline-item__node{
    background:  var(--GeneralBackColor);
}
::v-deep  .el-timeline-item__tail{
     border-left-color:  var(--GeneralBackColor) !important;
}
.state{
    position: absolute;
    top: 50%;left: 50%;
    transform: translate(-50%,-50%);
}
.headphoto{
    width: 70px;height: 70px;
}
.browsecount{
    width: 100%;
    margin-bottom: 20px;
}
.BrowseOne:hover{
   transform: scale(1.05);
}
 /* 平板或手机 */
 @media screen and (max-width: 500px){
  
    div#time{
       display: block;
       div{
            width: 100%;
            text-align: left;
       }
       div.view{
           position: static !important;
       }
    }
 }

.BrowseOne{
    width: 100%;
    justify-content: flex-start;
    border-radius: 10px;
    color: white;
     padding: 10px;
    box-sizing: border-box;
    margin-top: 10px;
    background: var(--GeneralBackColor) ;
    transition-duration: 0s;
    position: relative;
    #Detail{
        width: 80%;
        justify-content: flex-start;
        position: relative;
        z-index: 5;



        #name{
           font-size: 25px;
           font-weight: 600;
             width: 90%;
            text-align: left;
            margin-left: 5px;
        }

        #time{
            margin-top: 5px;
            margin-left: 5px;
            font-size: 14px;
            width: 100%;
            justify-content: flex-start;
            flex-wrap: nowrap;
            position: relative;

            div{
                 letter-spacing: 0;
                 font-size: 18px;
            }

            .view{
                position: absolute;
                right: 10px;
            }
        }
    }
}
</style>